import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

Item {
    implicitWidth: 200
    implicitHeight: 75
    property alias peerName:name.text
    property alias peerAvatar: peerAvatar.icon
    property alias message:label.text
    property alias selfAvatar: selfAvatar.icon
    property bool isPeer :true
    property bool isGroup :true

    id:root

    RowLayout {
        anchors.fill: parent
        Avatar {
            id:peerAvatar
            Layout.minimumWidth: 40
            Layout.maximumWidth: 40
            Layout.minimumHeight: 40
            Layout.maximumHeight: 40
            Layout.preferredWidth: 40
            Layout.preferredHeight: 40
            Layout.leftMargin: 25
            visible: isPeer
        }

        Item{
            Layout.fillWidth: true
            Layout.minimumHeight: 75
            Layout.maximumHeight: 75
            Text {
                id:name
                text:peerName
                TextMetrics {
                    id: nameMetrics
                    font: name.font
                    text: name.text
                }
                font.pixelSize: 12
                color:'#9e9e9e'
                width: nameMetrics.width
                height: parent.height/2
                verticalAlignment: Text.AlignBottom
                horizontalAlignment: isPeer?Text.AlignLeft:Text.AlignRight
                visible: isGroup && isPeer
            }

            Rectangle {
                anchors.top:name ? name.bottom:parent.top
                id:messageBox
                width: textMetrics.width +30
                height: root.height/2
                TextMetrics {
                    id: textMetrics
                    font: label.font
                    text: label.text
                }

                Label {
                    id:label
                    anchors.fill: parent
                    text:message
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: isPeer?Text.AlignLeft:Text.AlignRight
                    leftPadding: 15
                    rightPadding: 15
                    font.pixelSize: 16
                    background: Rectangle {
                        color: !isPeer?'#95ec69':'white'
                        radius: 4
                    }
                    // wrapMode:Text.Wrap
                }
                radius: 4
                anchors.left: isPeer ? parent.left : undefined
                anchors.right: isPeer ? undefined : parent.right
                anchors.topMargin: !isPeer || (!isGroup&&isPeer) ? -root.height*1/4 :undefined //!isPeer || (!isGroup&&isPeer) ? root.height*1/4:undefined
            }
        }

        Avatar {
            id:selfAvatar
            Layout.minimumWidth: 40
            Layout.maximumWidth: 40
            Layout.minimumHeight: 40
            Layout.maximumHeight: 40
            Layout.preferredWidth: 40
            Layout.preferredHeight: 40
            Layout.rightMargin: 25
            visible: !isPeer
        }
    }
}
